<template>
	<div
		class="base-switch-tabs flex justify-center"
		:class="[activeTextBold ? 'active-text-bold' : '', size, , !isPC() ? 'full' : '']">
		<div :class="['base-switch-tabs__content']">
			<div
				v-for="item in data"
				:key="item?.id"
				class="base-switch-tabs__item app-bg-react"
				:class="{ active: modelValue === item.id }"
				:style="{ '--active-bg-color': item.bgColor }"
				@click="emits('update:modelValue', item.id), emits('update:modelValueAll', item)">
				<slot :name="item.slot" :item="item">
					<template v-if="item.icon">
						<base-icon v-if="isUseLocalIcon" class="icon" :size="sizeIcon" :name="item.icon" />
						<img v-else class="icon" :src="item.icon" alt="" />
						<!--TODO 根据 icon iconImg iconSrc 等不同字段 使用不同的组件来展示icon-->
					</template>
					<base-text
						class="name"
						:text="!translation ? item.name : ''"
						:text-t="translation ? item.name : item.nameT" />
				</slot>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import BaseIcon from '@/components/base/icon/index.vue'
import { SwitchTabsType } from '@/components/base/switch-tabs/types.ts'
import { isPC } from '@/utils'
import BaseText from '@/components/base/text/index.vue'

defineProps({
	modelValue: {
		type: [String, Number],
		required: true
	},
	data: {
		type: Array as PropType<SwitchTabsType>,
		default: () => [
			// { id, name, icon, bgColor }
		]
	},
	translation: {
		type: Boolean,
		default: false
	},
	activeTextBold: {
		type: Boolean,
		default: false
	},
	size: {
		type: String,
		default: ''
	},
	isUseLocalIcon: {
		type: Boolean,
		default: true
	},
	// 直接指定 svg 图标的大小
	sizeIcon: {
		type: [Number, String]
	}
})
const emits = defineEmits(['update:modelValue', 'update:modelValueAll'])
</script>

<style lang="scss" scoped>
.base-switch-tabs {
	//--bg-color: var(--color-bg-3);
	--bg-color: transparent;
	--text-color: var(--color-text-1);
	--active-bg-color: var(--color-primary);
	--active-text-color: var(--color-white);
	--width: auto;
	--height: 48px;
	--min-width: 240px;
	--item-padding: 0 calc(var(--height) / 3);
	flex-shrink: 0;
	&.small {
		--height: 28px;
	}
}
.base-switch-tabs__content {
	display: flex;
	min-width: var(--min-width);
	max-width: 100%;
	width: max-content;
	height: var(--height);
	@apply rounded-lg;
	background: var(--bg-color);
	text-align: center;
	overflow-x: auto;
}
.base-switch-tabs__item {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--width);
	padding: var(--item-padding);
	@apply rounded-lg;
	font-size: 14px;
	color: var(--text-color);
	white-space: nowrap;
	transition: background-color 0.3s;
	.icon {
		font-size: 20px;
		margin-right: 4px;
	}
	&.active {
		background: var(--active-bg-color);
		color: var(--active-text-color);
	}
}
</style>
